
// demo1
let one_canvas = document.getElementById('one_canvas');
one_canvas.width=100;
one_canvas.height=100;
let one_ctx = one_canvas.getContext('2d');
one_ctx.moveTo(0, 0);
one_ctx.lineTo(100, 100);
one_ctx.stroke();

let one_canvas2 = document.getElementById('one_canvas2');
one_canvas2.width=200;
one_canvas2.height=200;
let one_ctx2 = one_canvas2.getContext('2d');
one_ctx2.moveTo(0, 0);
one_ctx2.lineTo(200, 200);
one_ctx2.stroke();

// demo2
let two_ctx = document.getElementById('two_canvas').getContext('2d');

two_ctx.moveTo(0, 0);
two_ctx.lineTo(100, 100);
two_ctx.lineTo(100, 200);
two_ctx.strokeStyle = '#F00';
two_ctx.stroke();

two_ctx.beginPath();
two_ctx.moveTo(300, 0);
two_ctx.lineTo(200, 100);
two_ctx.lineTo(200, 200);
two_ctx.closePath();
two_ctx.strokeStyle = '#0F0';
two_ctx.stroke();

two_ctx.beginPath();
two_ctx.arc(300,300,50,0,2*Math.PI,true);
two_ctx.strokeStyle = '#000';
two_ctx.stroke();

two_ctx.strokeRect(300,100,200,100);


// demo3
let three_canvas = document.getElementById('three_canvas');
let three_ctx = three_canvas.getContext('2d');

three_ctx.moveTo(0,0);
three_ctx.lineTo(100,100);
three_ctx.lineTo(100,200);
three_ctx.closePath();
three_ctx.lineWidth = 10; //lineWidth 设置描边的线宽
three_ctx.strokeStyle = "#F00";//strokeStyle 设置描边样式
three_ctx.stroke(); //实际执行

three_ctx.fillStyle = "rgba(0,255,0,0.5)";//fillStyle 设置填充样式
three_ctx.fill(); // 用fillStyle 设置的样式 填充

three_ctx.strokeRect(100,200,100,100);//画矩形
three_ctx.fillRect(100,200,100,100); //绘制已填色的矩形

three_ctx.beginPath();
three_ctx.arc(300,100,50,0,2*Math.PI,true);//画圆
three_ctx.fillStyle = "rgba(0,0,255,0.5)";
three_ctx.fill();//填充

//demo4
let four_ctx = document.getElementById('four_canvas').getContext('2d');

four_ctx.strokeStyle = "#00F";
four_ctx.save(); //save 保存当前绘画环境，包括变换和样式

four_ctx.moveTo(0,0);
four_ctx.lineTo(100,100);
four_ctx.stroke();

four_ctx.translate(0,100); //translate 平移变换; 坐标轴整体平移,新的坐标原点(0,100)
four_ctx.beginPath();
four_ctx.moveTo(0,0);
four_ctx.lineTo(100,100);
four_ctx.stroke();

four_ctx.rotate(Math.PI/4); //rotate 旋转变换; 坐标轴整体旋转90°,x y轴方向发生了改变; 坐标原点还是(0,100)
four_ctx.beginPath();
four_ctx.moveTo(0,0);
four_ctx.lineTo(100,100);
four_ctx.lineWidth = 5;
four_ctx.strokeStyle = "#F00";
four_ctx.stroke();


four_ctx.scale(1,0.5); //scale 缩放变换
four_ctx.fillRect(0,-100,100,100); // (x,y)矩形左上角坐标
four_ctx.restore(); //restore 恢复当前绘画环境，包括变换和样式

four_ctx.beginPath();
four_ctx.moveTo(200,200);
four_ctx.lineTo(300,300);
four_ctx.stroke();

//一个时钟表盘的简单案例
four_ctx.translate(450,100); //坐标轴原点平移到 (450,100)
four_ctx.beginPath();
four_ctx.arc(0,0,50,0,Math.PI*2,true);
four_ctx.stroke();
four_ctx.beginPath();
for(let i=0;i<12;i++){
    four_ctx.rotate(Math.PI/6); //坐标轴旋转
    four_ctx.moveTo(40,0);
    four_ctx.lineTo(50,0);
}
four_ctx.stroke();


// demo5
let five_ctx = document.getElementById('five_canvas').getContext('2d');
let five_linearGradient = five_ctx.createLinearGradient(0, 0, 200, 0); //线性渐变
five_linearGradient.addColorStop(0, 'rgb(255,0,0)');//给渐变添加颜色
five_linearGradient.addColorStop(0.3, 'rgb(0,255,0)');
five_linearGradient.addColorStop(1, 'rgb(0,0,255)');
five_ctx.fillStyle = five_linearGradient;//设置渐变作为样式
five_ctx.fillRect(0, 0, 200, 200);

let five_radialGradient = five_ctx.createRadialGradient(400, 50, 0, 400, 150, 100);//径向渐变
five_radialGradient.addColorStop(0, 'rgb(255,255,0)');
five_radialGradient.addColorStop(1, 'rgb(0,0,0)');
five_ctx.fillStyle = five_radialGradient;
five_ctx.beginPath();
five_ctx.arc(400, 150, 100, 0, Math.PI * 2, true);
five_ctx.fill();


// demo 6
let sic_ctx = document.getElementById('six_canvas').getContext('2d');
let str = "hello world";
sic_ctx.font = "50px sans-serif"; //设置文本样式，比如大小，字体
sic_ctx.textAlign = "center";  //水平对其设置，left center right
sic_ctx.textBaseline = "top"; //垂直对齐设置，top middle bottom
sic_ctx.fillText(str,300,100); //填充文本
sic_ctx.strokeText(str,200,200); //描边文本
let width = sic_ctx.measureText(str).width; //获取文本宽度
console.log(width);


//demo7
let seven_canvas = document.getElementById('seven_canvas');
let seven_ctx = seven_canvas.getContext('2d');

seven_ctx.fillRect(0, 0, seven_canvas.width, seven_canvas.height); //默认是黑色
let img = new Image();
img.src = "logo.png";
//一定要在图像加载完成后的回调中绘制图像
img.onload = function () {
    //在（0,0）点处绘制img图像
    // ctx.drawImage(img, 0, 0);
    //在（0,0）点处绘制img图像，缩放成256*80
    // ctx.drawImage(img, 0, 0, 256, 80);
    //获取img图像的（0,0）点处的40*40区域，绘制在（100,100）点处，缩放成80*80
    // seven_ctx.drawImage(img, 0, 0, 40, 40, 100, 100, 80, 80);

    //创建图像画刷，no-repeat,repeat-x,repeat-y,repeat
    let pattern = seven_ctx.createPattern(img, "repeat");
    seven_ctx.fillStyle = pattern;
    seven_ctx.fillRect(0, 0, seven_canvas.width, seven_canvas.height);
}

//demo8
let eight_canvas = document.getElementById('eight_canvas');
let eight_ctx = eight_canvas.getContext('2d');
eight_ctx.shadowOffsetX = 10;//阴影的X偏移
eight_ctx.shadowOffsetY = 10;//阴影的Y偏移
eight_ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';//阴影的颜色
eight_ctx.shadowBlur = 10;//阴影的模糊度

eight_ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; //淡红色
eight_ctx.fillRect(100, 100, 100, 100); //画矩形

eight_ctx.font = "50px sans-serif";
eight_ctx.fillText("仙女下凡",200,100); //绘制文本

//demo9
let nine_ctx = document.getElementById('nine_canvas').getContext('2d');
nine_ctx.save(); //保存当前环境
nine_ctx.arc(300, 100, 200, 0, Math.PI*2, true);//画圆
nine_ctx.clip(); //进行区域剪辑
nine_ctx.fillStyle = "#F00";
nine_ctx.fillRect(100, 100, 200, 200);//画矩形

nine_ctx.restore(); //恢复环境，释放了剪辑区域的作用
nine_ctx.beginPath();
nine_ctx.arc(400, 300, 100, 0, Math.PI*2, true);//画圆
nine_ctx.fillStyle = "#00F";
nine_ctx.fill();


//demo10
let ten_canvas = document.getElementById('ten_canvas');
let ten_ctx = ten_canvas.getContext('2d');
ten_ctx.arc(100, 100, 50, 0 ,Math.PI*2, true);//画圆
ten_ctx.fill();

//绘制二次样条曲线
ten_ctx.beginPath();
ten_ctx.moveTo(100,355);
ten_ctx.quadraticCurveTo(265,145,380,349);
ten_ctx.fill();

//绘制贝塞尔曲线
ten_ctx.beginPath();
ten_ctx.moveTo(175,375);
ten_ctx.bezierCurveTo(297,182,468,252,517,380);
ten_ctx.fillStyle="#0f0"
ten_ctx.fill();


//demo11
let eleven_canvas = document.getElementById('eleven_canvas');
let eleven_ctx = eleven_canvas.getContext('2d');

let posx = 0, posy = 0, dir = 1, isMouseInRect = false;

// 鼠标在矩形区域内,isMouseInRect=true; 否则 isMouseInRect=false
eleven_canvas.onmousemove = function(e){
    let mouseX = e.offsetX;
    let mouseY = e.offsetY;
    if(mouseX > posx && mouseY <posx +50 && mouseY > posy && mouseY < posy+ 50){
        isMouseInRect = true;
    }else{
        isMouseInRect = false;
    }
}
setInterval(function() {
    if(!isMouseInRect) posx += 10 * dir;
    eleven_ctx.clearRect(0, 0, eleven_canvas.width, eleven_canvas.height); //clearRect清空画布的一个矩形区域
    eleven_ctx.fillRect(posx, posy, 50, 50);//画矩形
    if(posx + 50 >= eleven_canvas.width) dir = -1;
    else if(posx <= 0) dir = 1;
},200);



// demo12  离屏技术
let twelve_canvas = document.getElementById('twelve_canvas');
let twelve_ctx = twelve_canvas.getContext('2d');

let twelve_offCanvas = document.getElementById('twelve_offCanvas');
let offCtx = twelve_offCanvas.getContext('2d');

let twelve_posx = 0, twelve_posy = 0, twelve_dir = 1, twelve_isMouseInRect = false;

//把一些复杂的绘画操作, 画在离屏Canvas上面(模拟耗时操作)
let drawALot = function(){
    for(let k=0; k<20; k++){
        for(let i=0; i<twelve_canvas.width; i+=10){
            for(let j=0; j<twelve_canvas.height; j+=10){
                offCtx.beginPath();
                offCtx.arc(i,j,5,0,2*Math.PI,true);
                offCtx.stroke();
            }
        }
    }
}

twelve_canvas.onmousemove = function(e){
    let mouseX = e.offsetX;
    let mouseY = e.offsetY;
    twelve_isMouseInRect = mouseX > twelve_posx && mouseX < twelve_posx + 50 && mouseY > twelve_posy && mouseY < twelve_posy + 50;
}

setInterval(function() {
    if(!twelve_isMouseInRect) twelve_posx += 10 * twelve_dir;
    twelve_ctx.clearRect(0, 0, twelve_canvas.width, twelve_canvas.height); //clearRect清空画布的一个矩形区域
    // drawALot();
    //真正要用到复杂的绘画的时候，直接从离屏Canvas上拷贝过来
    twelve_ctx.drawImage(twelve_offCanvas,0,0,twelve_offCanvas.width, twelve_offCanvas.height,0,0, twelve_canvas.width, twelve_canvas.height);
    twelve_ctx.fillRect(twelve_posx, twelve_posy, 50, 50);//画矩形
    if(twelve_posx + 50 >= twelve_canvas.width) twelve_dir = -1;
    else if(twelve_posx <= 0)  twelve_dir = 1;
},100);

drawALot();



